<template>
	<view class="page-container">
		<view class="top">
			<view class="back-btn" @click="backPage()">
				<view class="back-icon"></view>
			</view>
		</view>
		<view class="record-list">
			<view class="record-item" v-for="(rescue, index) in rescues" :key="index">
				<view>
					<view class="record-title">{{ rescue.title }}</view>
					<view class="record-user">救援信息：{{ rescue.content }}</view>
				</view>

				<button class="detail" @click="showDetail(rescue)">点击查看</button>
			</view>
		</view>
		<view v-if="rescues.length === 0" style="text-align:center; color:#fff; margin-top:100rpx;">
			暂无救援信息~
		</view>

		<!-- 弹窗背景遮罩 -->
		<view v-if="showPopup" class="popup-mask" @click="closePopup"></view>
		
		<!-- 弹窗主体 -->
		<view v-if="showPopup" class="popup-container">
			<view class="popup-content" @click.stop>
				<view class="popup-title">救援详情</view>
				<view class="popup-text">用户姓名：{{ user.userName }}</view>
				<view class="popup-text">联系方式：{{ user.phone }}</view>
				<view class="popup-text">车辆类型：{{ getBrandName(car.brand) }}</view>
				<view class="popup-text">车牌号：{{ car.carNum }}</view>
				<view class="popup-text">救援类型：{{ getRescueTypeName(selectedRescue.rescueTypeId) }}</view>
				<view class="popup-text">救援地点：{{ selectedRescue.rescuePosition }}</view>
				<view class="popup-text" v-if="selectedRescue.rescueTypeId==3">拖车目的地：{{ selectedRescue.endPosition }}</view>
				<view class="popup-text">呼救时间：{{ selectedRescue.rescueTime }}</view>
				<button type="primary" class="popup-button" @click="go">接单</button>
				<button type="primary" class="popup-button" @click="closePopup">关闭</button>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import request from '../../../utils/request';
	onLoad(() => {
		const userinfo = uni.getStorageSync('userinfo');
		const mid = userinfo.mid;
		getMessage(mid);
	})

	const rescues = ref([]);
	const selectedRescue = ref(null)
	const hid = ref()
	const showPopup = ref(false)
	const user = ref({})
	const car = ref({})
	const mid = ref('')
	
	const brandMap = {
		1: '奥迪',
		2: '红旗',
		3: '奔驰',
		4: '大众',
		5: '比亚迪'
	}
	
	const rescueTypeMap = {
		1: '搭电',
		2: '换胎',
		3: '拖车'
	}

	function getBrandName(id) {
		return brandMap[id] || '未知'
	}
	
	function getRescueTypeName(id) {
		return rescueTypeMap[id] || '未知'
	}

	function getMessage(sid) {
		request({
			url: '/notice/notice/getRescueMessageBySid',
			method: 'GET',
			data: {
				sid: sid
			},
			success: (res) => {
				rescues.value = res.data.data
			}
		})
	}

	// 显示弹框
	function showDetail(rescue) {
		selectedRescue.value = rescue
		hid.value = rescue.hid
		request({
			url: '/mp/rescue/' + hid.value,
			method: 'GET',
			success: (res) => {
				console.log(res)
				selectedRescue.value = res.data.data
				console.log(selectedRescue.value)
				request({
					url: '/bigbase/info/' + selectedRescue.value.userId,
					method: 'GET',
					success: (res) => {
						user.value = res.data.data
					}
				})
				request({
					url: '/bigbase/carInfo/' + selectedRescue.value.carId,
					method: 'GET',
					success: (res) => {
						car.value = res.data.data
					}
				})
				showPopup.value = true
			}
		})
	}

	// 关闭弹窗
	function closePopup() {
		showPopup.value = false
	}
	
	function go() {
		request({
			url: '/mp/rescue/' + hid.value,
			method: 'GET',
			success: (res) => {
				if(res.data.data.merchantId==null){
					request({
						url: '/mp/rescue/',
						method: 'PUT',
						data: {
							id: hid.value,
							merchantId: uni.getStorageSync('userinfo').mid
						},
						success: (res) => {
							console.log(res)
						}
					})
					request({
						url: 'notice/notice/deleteRescueMessage',
						method: 'GET',
						data: {
							hid: hid.value
						},
						success: (res) => {
							console.log(res)
						}
					})
				}else {
					uni.showToast({
						title: `已被其他商家接单`,
						icon: 'none'
					});
					showPopup.value = false
				}
			}
		})
		showPopup.value = false
	}

	function backPage() {
		uni.navigateBack()
	}
</script>

<style scoped>
	.page-container {
		width: 100%;
	}

	.top {
		width: 100%;
		height: 400rpx;
		background-color: #0091ff;
		background-size: 100%;
	}

	.record-list {
		margin-top: -20%;
		width: 95%;
		margin-left: 2%;
	}

	.record-item {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 50rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		display: flex;
	}

	.record-title {

		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 20rpx;
	}

	.record-user {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.back-btn {
		margin-left: 20rpx;
		width: 50rpx;
		height: 50rpx;
		position: relative;
	}

	.back-icon {
		width: 30px;
		height: 30px;
	}

	.back-icon::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 2px;
		background-color: #fff;
		top: 80rpx;
		left: 47rpx;
		transform: translate(-50%, -50%);
	}

	.back-icon::after {
		content: "";
		position: absolute;
		width: 10px;
		height: 10px;
		border-left: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		top: 70rpx;
		left: 30rpx;
	}

	.detail {
		margin-left: 120rpx;
		height: 100rpx;
		line-height: 100rpx;
		background-color: aquamarine;
		margin-top: 15rpx;
	}
	
	
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 998;
	}
	
	.popup-container {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
		width: 80%;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
		padding: 40rpx;
	}
	
	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.popup-title {
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.popup-text {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		text-align: left;
		width: 100%;
	}
	
	.popup-button {
		margin-top: 30rpx;
		width: 100%;
	}

</style>